<template>
    <div class="searchModule">
        <div class="searchItem" v-for="item, index in searchList" :key="index">
            <div class="label">{{ item.label }}：</div>
            <el-input class="w100p" v-if="item.falg == 'input'" v-model="selectFormData[item.key]" placeholder="请输入"
                clearable @change="handleChange($event, item.falg)"></el-input>
            <el-select class="w100p" v-if="item.falg == 'users'" v-model="selectFormData[item.key]" filterable multiple
                collapse-tags clearable placeholder="请选择" @change="handleChange($event, item.falg)">
                <el-option v-for="user in users.list" :key="user.id" :label="user.realname" :value="user.realname">
                </el-option>
            </el-select>
            <el-select class="w100p" v-if="item.falg == 'select'" v-model="selectFormData[item.key]" filterable
                :multiple="item.multiple" :clearable="item.clearable" collapse-tags  placeholder="请选择"
                @change="handleChange($event, item.falg)">
                <el-option v-for="info, infoIndex in (item.options || [])" :key="infoIndex" :label="info.label"
                    :value="info.value">
                </el-option>
            </el-select>
            <el-select class="w100p" v-if="item.falg == 'products'" v-model="selectFormData[item.key]" filterable
                multiple collapse-tags clearable placeholder="请选择" @change="handleChange($event, item.falg)">
                <el-option v-for="product in products.list" :key="product.id" :label="product.name"
                    :value="product.name">
                </el-option>
            </el-select>
            <el-select class="w100p" v-if="item.falg == 'projects'" v-model="selectFormData[item.key]" filterable
                multiple collapse-tags clearable placeholder="请选择" @change="handleChange($event, item.falg)">
                <el-option v-for="project in projects.list" :key="project.id" :label="project.name"
                    :value="project.name">
                </el-option>
            </el-select>
            <el-select class="w100p" v-if="item.falg == 'executions'" v-model="selectFormData[item.key]" filterable
                multiple collapse-tags clearable placeholder="请选择" @change="handleChange($event, item.falg)">
                <el-option v-for="execution in executions.list" :key="execution.id" :label="execution.name"
                    :value="execution.name + execution.name">
                </el-option>
            </el-select>

            <el-date-picker class="w100p" v-if="item.falg == 'daterange'" v-model="selectFormData[item.key]"
                value-format="yyyy-MM-dd" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                @change="handleChange($event, item.falg)">
            </el-date-picker>
        </div>
    </div>
</template>

<script>
import searchApi from "@/api/searchItem.js"
export default {
    name: "BtnSlot",
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            selectFormData: {},
            users: {
                page: 1,
                limit: 10000,
                list: [{ realname: '张三', id: 1 }]
            },
            products: {
                page: 1,
                limit: 10000,
                list: []
            },
            projects: {
                page: 1,
                limit: 10000,
                list: []
            },
            executions: {
                page: 1,
                limit: 10000,
                list: []
            },
        };
    },
    props: {
        searchList: {
            type: Array,
            default: () => [
                {
                    label: '负责人',
                    falg: 'users',
                    key: 'users',
                    defaultData: null
                },
                {
                    label: '选择产品',
                    falg: 'products',
                    key: 'products',
                    defaultData: null
                },
                {
                    label: '选择时间',
                    falg: 'daterange',
                    key: 'daterange',
                    defaultData: null
                },

            ],
        },
    },
    mounted() {
        //查询用户
        this.getUser();
        //查询产品
        this.getProducts();
        //查询项目
        this.getProjects();
        //初始化表单
        this.initData();
    },
    methods: {
        initData() {
            this.searchList.forEach(e => {
                let { key, defaultData } = e
                this.$set(this.selectFormData,key,defaultData)
            })
        },
        handleChange(event, flag) {
            this.$emit('querySearchForm', this.selectFormData);
            //如果查询项目就查询项目阶段
            if (flag == 'projects') {
                let projectNames = event
                let filterDataList = this.projects.list.filter(e => projectNames.includes(e.name))
                let projectIdList = filterDataList.map(e => e.id)
                console.log(projectIdList)
                // this.executionsList(projectIdList, projectNames)
            }
        },
        async executionsList(idList = [], projectNames) {
            try {
                if (idList.length === 0) {
                    return;
                }
                let promises = idList.map(id => searchApi.executions(id, {
                    page: 1,
                    limit: 10000
                }));
                let results = await Promise.all(promises);
                projectNames
                // this.projects.list = results.flat() || []; // 假设你希望将所有项目合并为一个扁平数组
                let list = [];
                (results.flat() || []).forEach(e => {
                    list = list.concat(e.executions)
                })
                list.forEach((e, i) => {
                    e.projectName = projectNames[i];
                })
                this.executions.list = list;
                console.log(this.executions)
                console.log("Execution results:", list);
            } catch (error) {
                console.error("Error fetching execution results:", error);
            }
        },
        async getUser() {
            let res = await searchApi.users({ ...this.users });
            this.users.list = res.users || [];
        },
        async getProducts() {
            let res = await searchApi.products({ ...this.products });
            this.products.list = res.products || [];
        },
        async getProjects() {
            let res = await searchApi.projects({ ...this.projects });
            this.projects.list = res.projects || [];
        },
    },
};
</script>
<style lang="scss" scoped>
.searchModule {
    padding: 15px;
    margin: 0 15px;
    margin-bottom: 10px;
    box-sizing: content-box;
    background-color: #ffffff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    .searchItem {
        width: 25%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;

        .label {
            min-width: 120px;
            text-align: right;
            padding: 0 15px;
            font-size: 14px;
            font-weight: bold;
        }
    }
}

.w100p {
    width: 100%;
}
</style>